<template>
  <view class="layout-main">
    <view>
      <view class="layout-card">
        <view class="layout-top">
          <view class="layout-top-left">
            <view>登记人：南星</view>
            <view class="layout-sign"> 重要信息 </view>
          </view>
          <view class="layout-top-right">通过</view>
        </view>
        <view class="layout-center">
          <view class="layout-center-title">校庆活动安排</view>
          <view class="layout-center-detail">
            <view>
              <text class="layout-center-text"> 来文单位:</text>
              <text>广东希望小学</text>
            </view>
            <view>
              <text class="layout-center-text"> 来文日期: </text>
              <text>2022-05-12 15:48</text>
            </view>
            <view>
              <text class="layout-center-text"> 登录日期: </text>
              <text>2022-05-12 15:48</text>
            </view>
          </view>
        </view>
        <view class="layout-bottom">
          <view class="layout-zhuanfa">转发</view>
          <view class="layout-beizhu">备注</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang='scss' scoped>
.layout-main {
  padding: 0 30rpx;
  margin: 24rpx 0;
  .layout-card {
    width: 100%;
    height: 420rpx;
    border-radius: 10rpx;
    background-color: #fff;
    .layout-top {
      display: flex;
      height: 100rpx;
      line-height: 100rpx;

      border-bottom: 1px solid #eaeaea;
      padding-left: 32rpx;
      padding-right: 48rpx;
      justify-content: space-between;

      .layout-top-left {
        display: flex;
        font-size: 28rpx;
        color: #131d28;
        margin-right: 20rpx;
        .layout-sign {
          margin-top: 26rpx;
          margin-left: 20rpx;
          font-size: 20rpx;
          // width: 100rpx;
          padding: 0 12rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
          background-color: #ff4c4b;
          border-radius: 22rpx 22rpx 22rpx 0;
          color: #fff;
        }
      }
      .layout-top-right {
        font-size: 24rpx;
      }
      .layout-top-right {
        color: #00c69b;
      }
    }
    .layout-center {
      margin-left: 30rpx;
      font-size: 26rpx;
      .layout-center-title {
        font-size: 28rpx;
        font-weight: 700;
        color: #2c3337;
        margin: 25rpx 0 37rpx 2rpx;
      }
      .layout-center-detail {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 138rpx;
        color: #131d28;
        .layout-center-text {
          color: #69717a;
          margin-right: 20rpx;
        }
      }
    }
    .layout-bottom {
      display: flex;
      width: 100%;
      font-size: 24rpx;
      justify-content: flex-end;
      margin: 22rpx 0;
      .layout-zhuanfa,
      .layout-beizhu {
        margin-right: 24rpx;
        width: 102rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;
        border-radius: 5rpx;
      }
      .layout-zhuanfa {
        background-color: rgba(255, 138, 0, 0.1);

        color: #ff8a00;
      }
      .layout-beizhu {
        background-color: rgba(15, 139, 255, 0.1);
        color: #0f8bff;
      }
    }
  }
}
</style>